import React, { useEffect, useRef } from 'react';
import { } from 'antd'
import { IRouteComponentProps, useHistory } from 'umi'
import styles from './index.less'
import useStore from '@/context/useStore'
import Editor from 'for-editor'
import { observer } from 'mobx-react-lite'
import { convert } from '@/util/getTime'
// 评论组件
import Comment from '@/components/comment'
import Msgcommentlist from '@/components/msgcommentlist'

let Index: React.FC<IRouteComponentProps> = (props: any) => {
    let ref = useRef<HTMLDivElement>(null)
    let history = useHistory()
    let { Knowledge } = useStore()
    useEffect(() => {
        Knowledge.getKnowledgeID(props.match.params.id)
        Knowledge.getKnowledgeIDID(props.match.params.ID)
    }, [props.match.params.ID])
    let goDetailPageID = (ID: string) => {
        history.push(`/knowledgenotes/${props.match.params.id}/${ID}`)
    }
    let KnowledgeChilrenList = Knowledge.KnowledgeChilrenList
    let KnowledgeChilrenHtmlList = Knowledge.KnowledgeChilrenHtmlList
    console.log(JSON.parse(JSON.stringify(KnowledgeChilrenList)));
    console.log(JSON.parse(JSON.stringify(KnowledgeChilrenHtmlList)));
    return (
        <div className={styles.DetailPage}>
            <header>
                知识笔记 / {KnowledgeChilrenList.title} / {KnowledgeChilrenHtmlList.title}
            </header>
            <div className={styles.DetailPagecCantainer}>
                <div className={styles.DetailPageLeft}>
                    <div className={styles.markdown}>
                        <div className='editorHead'>
                            <h1 >${KnowledgeChilrenHtmlList.title}</h1>
                            <p >
                                <span>发布于<time>${convert(KnowledgeChilrenList.updateAt)}</time></span>
                                <span> • </span>
                                <span>阅读量 ${KnowledgeChilrenList.views}</span></p>
                        </div>
                        <div ref={ref}
                            dangerouslySetInnerHTML={{
                                __html: KnowledgeChilrenHtmlList.html
                            }}>

                        </div>
                        <div className={styles.detailButton}>
                            {
                                KnowledgeChilrenList.children && KnowledgeChilrenHtmlList.order - 1 >= 0 ? <div
                                    onClick={() => { goDetailPageID((KnowledgeChilrenList.children[KnowledgeChilrenHtmlList.order - 1]).id) }}><svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>{KnowledgeChilrenList.children[KnowledgeChilrenHtmlList.order - 1].title}</div> : ''
                            }
                            {
                                KnowledgeChilrenList.children && KnowledgeChilrenHtmlList.order + 1 <= KnowledgeChilrenList.children.length - 1 ? <div onClick={() => { goDetailPageID((KnowledgeChilrenList.children[KnowledgeChilrenHtmlList.order + 1]).id) }}>

                                    {(KnowledgeChilrenList.children[KnowledgeChilrenHtmlList.order + 1]).title}<svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"></path></svg></div> : ''
                            }
                        </div>
                    </div>
                    <div style={{ textAlign: 'center', padding: '1rem 0' }}> <span>评论</span></div>
                    <Comment></Comment>
                </div>
                <div className={styles.DetailPageRight}>
                    <div className={styles.sticky}>
                        <div className={styles.DetailPageRightTop}>
                            <header>{KnowledgeChilrenList.title}</header>
                            <ul>
                                {KnowledgeChilrenList.children && KnowledgeChilrenList.children.map((item) => {
                                    return <li onClick={() => { goDetailPageID(item.id) }}>{item.title}1212
                                    </li>
                                })}
                            </ul>
                        </div>
                        {
                            KnowledgeChilrenHtmlList.toc && <div className={styles.DetailPageRightBottom}>
                                <header>目录</header>
                                <main>
                                    {JSON.parse(KnowledgeChilrenHtmlList.toc).length > 0 &&
                                        JSON.parse(KnowledgeChilrenHtmlList.toc).map((item: any, index: number) => {

                                            return <li className={'level' + item.level}>{item.text}</li>

                                        })}

                                </main>

                            </div>
                        }
                    </div>
                </div>
                <span></span>
            </div>

        </div >
    );
}
export default observer(Index)